<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main2"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'Account')}"/>
    <title>新增客户</title>
</head>

<body>
<div class="main-body">
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="page-header-title">
                <h4>新增客户</h4>
            </div>

            <div class="page-header-breadcrumb">
                <ul class="breadcrumb-title">
                    <li class="breadcrumb-item">
                        <a href="/salesDashboard/index">
                            <i class="icofont icofont-home"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <g:link controller="account" action="index">客户信息</g:link>
                    </li>
                    <li class="breadcrumb-item">新增客户</li>
                </ul>
            </div>
        </div>
        <!-- Page-header end -->
        <!-- Page-body start -->
        <div class="page-body">
            <g:if test="${flash.message}">
              <ul class="errors" role="alert">
                <li><g:message error="${flash.message}"/></li>
              </ul>
            </g:if>
            <g:hasErrors bean="${this.account}">
                <ul class="errors" role="alert">
                    <g:eachError bean="${this.account}" var="error">
                        <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message
                                error="${error}"/></li>
                    </g:eachError>
                </ul>
            </g:hasErrors>
        <!-- Hover table card start -->
        <g:form action="save" class="form-horizontal">
            <div class="card mainDiv">
                <div class="card-header">
                    <h5>新增客户</h5>

                    <div class="card-header-right">
                        <i class="icofont icofont-rounded-down"></i>
                    </div>
                </div>

                <div class="card-block">

                        <g:textField class="hidden" name="targetUri" value="${targetUri}"></g:textField>
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label is-required">客户名称</label>

                            <div class="col-md-3"><g:textField class="form-control" name="name" id="name"
                                             value="${this.account?.name}"/></div>

                            <label class="col-md-2 col-form-label">曾用名</label>

                            <div class="col-md-3">

                              <g:textField class="form-control" name="alias" id="alias"
                                           value="${this.account?.alias}"/>
                            </div>
                        </div>
                        <div class="form-group row">

                            <label class="col-md-2 col-form-label is-required">类型</label>

                            <div class="col-md-3">
                              <g:select class="form-control" name="type" value="${this.account?.type?.id}"
                                        id="type" optionKey="id" optionValue="name"
                                        from="${com.next.AccountType.list()}"
                                        noSelection="${['': '请选择']}"/>

                            </div>

                            <label class="col-md-2 col-form-label">分级</label>

                            <div class="col-md-3">
                              <g:select class="form-control" name="level" value="${this.account?.level?.id}"
                                        id="level" optionKey="id" optionValue="name"
                                        from="${com.next.AccountLevel.list()}"
                                        noSelection="${['': '请选择']}"/>

                            </div>

                        </div>
                        <div class="form-group row">

                            <label class="col-md-2 col-form-label is-required">行业</label>

                            <div class="col-md-3">
                              <g:select class="form-control" name="industry" value="${this.account?.industry?.id}"
                                        id="industry" optionKey="id" optionValue="name"
                                        from="${com.next.Industry.list()}"
                                        noSelection="${['': '请选择']}"/>

                            </div>

                        </div>


                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">雇员数量</label>

                            <div class="col-md-3">
                              <g:field type="number" class="form-control" name="numberOfEmployees"
                                       id="numberOfEmployees"
                                       value="${this.account?.numberOfEmployees}"/></div>
                            <label class="col-md-2 col-form-label">网站</label>

                            <div class="col-md-3">
                              <g:field tyle="url" class="form-control" name="website" id="website"
                                           value="${this.account?.website}"/>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">国家</label>

                            <div class="col-md-3">
                              <g:select class="form-control" name="country.id" value="${this.account?.country?.id}" optionValue="name" optionKey="id"
                                          from="${com.next.Country.list()}" noSelection="${['': '请选择']}"/>
                            </div>

                            <label class="col-md-2 col-form-label">城市</label>
                            <div class="col-md-3">
                                <g:select class="form-control" name="city.id" value="${this.account?.city?.id}" optionValue="name" optionKey="id"
                                          from="${com.next.City.list()}" noSelection="${['': '请选择']}"/>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">注册资本货币类型</label>
                            <div class="col-md-3">
                                <g:select class="form-control" name="currencyType.id" value="${this.account?.currencyType?.id}" optionValue="name" optionKey="id"
                                          from="${com.next.CurrencyType.list()}" noSelection="${['': '请选择']}"/>
                            </div>

                            <label class="col-md-2 col-form-label">注册资本</label>
                            <div class="col-md-3">
                              <div class="input-group">
                                <g:textField class="form-control" name="registeredCapital" id="registeredCapital"
                                           value="${this.account?.registeredCapital}"/>
                                  <span class="input-group-addon">元</span>
                              </div></div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">上级客户</label>

                            <div class="col-md-3">
                                <g:select class="form-control" name="parent.id" value="${this.account?.parent?.id}" optionValue="account" optionKey="accountId"
                                          from="${com.next.AccountTeam.findAllByUser(this?.user)}" noSelection="${['': '请选择']}"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">启用</label>

                            <div class="col-md-3 border-checkbox-section">
                                <div class="border-checkbox-group border-checkbox-group-primary form-control-static">
                                        <g:checkBox class="border-checkbox" name="active" id="checkbox0"
                                                    value="${this.account?.active}"/>
                                        <label class="border-checkbox-label" for="checkbox0"></label>
                                    </div>

                            </div>
                              <g:if test="${this.enableTerritory}">
                                <label class="col-md-2 col-form-label is-required">销售区域</label>

                                <div class="col-md-3">
                                  <g:select class="form-control" name="territory"
                                            value="${this.account?.territory?.id}"
                                            id="territory" optionKey="id" optionValue="name"
                                            from="${com.next.Territory.findAllByActive(true)}"
                                            noSelection="${['': '请选择']}"/></div>
                            </g:if>
                        </div>



                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">所有者</label>

                            <div class="col-md-3">
                              <g:select class="form-control" name="user" value="${this.account?.user?.id}" id="level"
                                        optionKey="id" optionValue="fullName" from="${com.next.User.list()}"
                                        noSelection="${['': '请选择']}"/></div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">描述</label>

                            <div class="col-md-8">
                              <g:textArea rows="3" class="form-control" name="description" id="description"
                                          value="${this.account?.description}"/></div>
                        </div>



                        <div class="form-group row submitDiv">
                            <div class="col-md-12">
                                <g:submitButton class="btn btn-info submitButton" name="update" value="保存"/></div>
                        </div>

                </div>
            </div>

              <g:each var="contact" in="${account?.contacts}" status="i">

              <g:render template="/layouts/mashTemplate/createContact" model="['contact': contact, 'i': i, 'hidden': false]" />

              </g:each>

              <div class="card" id="createDiv">
                  <div class="card-header">
                      <h5>联系人信息</h5>

                      <div class="card-header-right">
                            <!-- <i class="icofont icofont-minus text-danger deleteContactDiv"></i> -->
                            <i class="ion-plus cloneContactDiv"></i>
                          <i class="icofont icofont-rounded-down"></i>
                      </div>
                  </div>

              </div>
            <g:render template="/layouts/mashTemplate/createContact" model="['contact': null, 'i': '_clone', 'hidden': true]" />

            </g:form>
            <!-- Hover table card end -->
        </div>

        <!-- Page-body end -->
    </div>
</div>


<g:javascript>
  //dynamic create associate contact
  $(function () {
    var submitCount = $(".submitButton").length
    if (submitCount > 2)
    {
      $(".mainDiv").find(".submitDiv").remove()
      $("#createDiv").hide()
      $(".contactDiv").each (function() {
        if ($(this).attr('id') != "contact_clone" && $(this).attr('id') != 'contact'+(submitCount-3))
        {
          $(this).find(".submitDiv").remove()
          $(this).find(".cloneContactDiv").remove()
        }
      })
    }


    $(document).on("click", ".submitButton", function () {
      $("#contact_clone").remove()
    });

    $(document).on("click", ".cloneContactDiv", function () {
      if ($(".contactDiv").length == 1)
      {
        $(".mainDiv").find('.submitDiv').remove()
        $("#createDiv").hide()
      }

        var originalDiv = $(this).parents(".card");
        var cloneDiv = $("#contact_clone").clone(true);
        $(this).remove();
        var submitDiv = originalDiv.find(".submitDiv");
        submitDiv.remove();

        var originalSalutation = $("#contact_clone").find("#salutationName").html();
        var salutationDiv = cloneDiv.find("#salutationDiv");
        salutationDiv.html("");
        var option = '<select class="form-control" name="contacts[' + ($(".contactDiv").length-1) + '].salutation" value="">';
        option += originalSalutation;
        option += '</select>';
        salutationDiv.append(option)

        cloneDiv.find("input[id$=contactType]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].type')
        cloneDiv.find("input[id$=fullName]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].fullName')
        cloneDiv.find("select[id$=salutation]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].salutation')
        cloneDiv.find("input[id$=cellphone]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].cellphone')
        cloneDiv.find("input[id^=phone]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].phone')
        cloneDiv.find("input[id$=title]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].title')
        cloneDiv.find("input[id$=email]").attr('name', 'contacts['+($(".contactDiv").length-1)+'].email')
        cloneDiv.attr('id', 'contact' + ($(".contactDiv").length-1))
        originalDiv.after(cloneDiv)
        cloneDiv.show()

        if ($(".contactDiv").length == 6)
        {
          cloneDiv.find(".cloneContactDiv").remove();
        }

    });

    $(document).on("click", ".deleteContactDiv", function () {
      var currentContactDiv = $(this).parents(".contactDiv");
      var prevContactDiv = currentContactDiv.prev(".contactDiv");
      var submitDiv = prevContactDiv.find(".card-block");
      var content = '<div class="form-group row submitDiv"><div class="col-md-12"><button type="submit" class="btn btn-info submitButton">保存</button></div></div>'
      submitDiv.append(content);
      var toolDiv = prevContactDiv.find(".icofont-rounded-down");
      var addContactDiv = '<i class="ion-plus cloneContactDiv"></i>'
      toolDiv.before(addContactDiv);
      currentContactDiv.remove();
      if ($(".contactDiv").length == 1)
      {
        $(".mainDiv").find('.card-block').append(content)
        if ($("#createDiv").find(".cloneContactDiv").length == 0)
        {
          $("#createDiv").find(".icofont-rounded-down").before(addContactDiv)
        }
        $("#createDiv").show()
      }
    });

    })
</g:javascript>
</body>

</html>
